<template>
    <div class="login">
        <!--  :rules="[{ required: true, message: '请填写用户名' }]"  -->
        <!-- <h3>登录</h3> -->
        <van-form class="van-form" @submit="onSubmit">
            <van-field class="van-field" v-model="username" name="uname" label="手机号" placeholder="请输入手机号" />

            <van-field class="van-field" v-model="password" type="password" name="upass" label="密码"
                placeholder="请输入密码" />

            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit"
                    style="background-color: #0c8bf3;">登录</van-button>
            </div>

            <div>
                <router-link class="link-login" to="/register">
                    <p>还没账号，立即注册?</p>
                </router-link>
            </div>

            <div class="message-login">
                <van-checkbox v-model="checked" icon-size="12px"></van-checkbox>
                阅读并同意壁纸分享的
                <a href="#">《服务协议》</a>
                <a href="#">《个人信息保护政策》</a>
                未注册手机号将自动注册
            </div>
        </van-form>
    </div>
</template>

<script>
// 导入组件
import { Toast, Dialog } from 'vant'
// 初始化（获取存储在本地的所有用户信息）
let sky_users = []
let sky_users_str = localStorage.getItem("SKY_USERS")
if (sky_users_str) {
    // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
    sky_users = JSON.parse(sky_users_str)
}

export default {
    data() {
        return {
            username: '',
            password: '',
            checked: false,
        };
    },
    methods: {
        onSubmit(values) {
            // console.log('submit', values);
            // 判断用户是否阅读平台协议
            if (!this.checked) {
                Toast('请阅读协议和政策');
                return false;
            }

            // 解构赋值
            let { uname, upass } = values
            // 判断输入框是否为空
            if (uname == "" || upass == "") {
                // 弹窗提示
                // Toast.fail('输入框不能为空');
                Toast('输入框不能为空~')
                return false;
            }

            // 匹配账号和密码
            let arr = sky_users.filter(item => {
                return item.username == uname && item.password == upass
            })

            console.log(arr);
            // 根据arr数组长度判断用户是否登录成功
            if (arr.length == 1) {
                // 把用户ID作为token
                let id = arr[0].id;
                localStorage.setItem("AUTO_TOKEN", id);

                // 给用户反馈“注册结果”
                Dialog.alert({
                    message: '登录成功。',
                }).then(() => {
                    // on close
                    // 跳转登录页
                    this.$router.push({ path: '/my' })
                });
            }
            else {
                let arr2 = sky_users.filter(item => item.username == uname)
                if (arr2.length == 0) {
                    Toast('该手机号不存在')
                }
                else {
                    Toast('手机号或者密码错误')
                }
            }
        },
    },


};
</script>

<style lang="less" scoped>
@import '../common/less/varible.less';

* {
    font-family: @fontfamily;
    padding: 0;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
}
.login {
    overflow: hidden;
    .van-form {
        overflow: hidden;
        top: 30%;
        position: fixed;


        .van-field {
            width: 90%;
            margin-left: 20px;
            margin-top: 10px;
            background-color: transparent;
        }

    }

    .van-button--normal {
        border: 0;
    }

    .link-login {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 16px;

        // text-decoration: underline;
    }

    .message-login {
        padding: 0 15px;
        box-sizing: border-box;
        margin-top: 20px;
        font-size: 16px;
        font-family: @fontfamily;
        font-weight: normal;
        text-align: center;
        color: #666;
        line-height: 175%;

        a {
            color: #0c8bf3;
        }

        .van-checkbox {
            display: inline-block !important;
        }
    }

}
</style>